import {TabBar} from 'antd-mobile'

import React, { useCallback, useEffect, useState } from 'react';

import {withRouter} from 'react-router-dom'

import news_a from '../../statics/img/news_a.svg'
import people_a from '../../statics/img/people_a.svg'
import video_a from '../../statics/img/video_a.svg'
import video from '../../statics/img/video.svg'
import people from '../../statics/img/people.svg'
import news from '../../statics/img/news.svg'
import pamphlet from '../../statics/img/pamphlet.svg'
import pamphlet_a from '../../statics/img/pamphlet_a.svg'
import my from '../../statics/img/my.svg'
import my_a from '../../statics/img/my_a.svg'

import './index.css'

// let temp = null

const Footer = props => {
  
  const [Tab,setTab] = useState('profile')
  const [hidden,sethidden] = useState(false)

  const getto = useCallback( url =>{
    props.history.push({pathname:url})
  },[]) 

  // console.log('getto是否重新生成:',Object.is(temp,getto)?'否':'是');
  // temp = getto

  useEffect(()=>{
    props.history.listen(route => {
      const path = route.pathname
      if(path.indexOf('fchat') !== -1){
        sethidden(true)
      }
      else {
        sethidden(false)
      }
      if(path.indexOf('news') !== -1){
        setTab('news')
      }
      else if (path.indexOf('video') !== -1){
        setTab('video')
      }
      else if (path.indexOf('people') !== -1){
        setTab('people')
      }
      else if (path.indexOf('pamphlet')!== -1){
        setTab('pamphlet')
      }
      else if (path.indexOf('search')!==-1){
        setTab('news')
      }
      else {
        setTab('profile')
      }
    })
  },[])

  return (
    <div className='footer'>
      <TabBar
        unselectedTintColor = '#949494'
        tintColor = '#33A3F4'
        barTintColor = 'white'
        hidden = {hidden}
        prerenderingSiblingsNumber = {0}
        >
          <TabBar.Item 
            title="舆情"
            key='public_sentiment'
            icon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ news + ') center center /  21px 21px no-repeat' }}
            />}
            selectedIcon={<div style={{
              width: '22px',
              height: '22px',
              background: 'url('+ news_a + ') center center /  21px 21px no-repeat' }}
            />}
            selected={ Tab === 'news'}
            
            onPress={() => {
              getto('/main/home/news')
              setTab ('news')
            }}
            />
            
          <TabBar.Item
            title="视频"
            key='video'
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ video + ') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ video_a + ') center center /  21px 21px no-repeat' }}
              />
            }
            selected={Tab === 'video'}
            onPress={() => {
              getto('/main/home/video')
              setTab('video')
              }}
           />

          <TabBar.Item
            title="人物"
            key="people"
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ people + ') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ people_a + ') center center /  21px 21px no-repeat' }}
              />
            }           
            selected={ Tab === 'people'}
            onPress={() => {
              getto('/main/home/people')
              setTab('people') 
            }}/>
         
          <TabBar.Item
            key="pamphlet"
            title="口径库"
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ pamphlet + ') center center /  21px 21px no-repeat' }}
              />
              }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ pamphlet_a + ') center center /  21px 21px no-repeat' }}
              />
            }
            
            selected={ Tab === 'pamphlet'}
            onPress={() => {
              getto('/main/pamphlet')
              setTab('pamphlet')
              }}/>
              
          <TabBar.Item
            title="我的"
            key="my"
            icon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ my + ') center center /  21px 21px no-repeat' }}
              />
            }
            selectedIcon={
              <div style={{
                width: '22px',
                height: '22px',
                background: 'url('+ my_a + ') center center /  21px 21px no-repeat' }}
              />
            }
            
            
            selected={ Tab === 'profile'}
            onPress={() => {
              getto('/main/profile')
              setTab('profile')
            }}/>
      </TabBar>
    </div>
  )
}



export default withRouter(Footer);